<!-- 我的客户 -->
<template>
	<view>

		<view class="top p-left50 p-right50 white"
			:style="{backgroundImage:'url(' + imgUrl + 'Uploads/private/mc_bg.png' + ')'}">
			<view class="d-flex j-sb">
				<view class="p-top30">
					<view class="size32 bold m-bot10">所有客户(位)</view>
					<view class="size40 bold800">{{ pageData.all_guest || 0 }}</view>
				</view>
				<view class="d-flex" v-if="pageData">
					<image class="m-top30" :src="imgUrl + 'Uploads/private/code_white.png'" mode="widthFix"
						style="width: 40rpx;" @click="toUrl('/privatePage/single/codeCard')"></image>
					<view class="climate m-left40 bold text-center">
						<view class="size26">{{ pageData.chineseCalendar.term }}</view>
						<view class="size26">{{ pageData.chineseCalendar.info }}</view>
					</view>
				</view>
			</view>
			<view class="d-flex m-top30">
				<view>
					<view class="size28 m-bot10">今日新增(位)</view>
					<view class="size34 bold800">{{ pageData.today_new || 0 }}</view>
				</view>
				<view class="m-left80">
					<view class="size28 m-bot10">今日活跃(位)</view>
					<view class="size34 bold800">{{ pageData.today_active || 0 }}</view>
				</view>
				<view class="m-left80" @click.stop="toUrl('frequenter')">
					<view class="size28 m-bot10">老客户（位）</view>
					<view class="d-flex a-center ">
						<view class="size34 bold800">{{ pageData.old_guest || 0 }}</view>
						<view class="iconfont icon-a-zujian32 white h6 m-left10"></view>
					</view>
				</view>
			</view>
		</view>
		<view class="d-flex j-sb a-center p-right30">
			<u-tabs :list="tabList" :lineColor="color" lineWidth="32" @click="tabClick" itemStyle="height: 50px;"
				:inactiveStyle="{color:'#777',fontSize:'32rpx',transform:'scale(1)'}"
				:activeStyle="{color:'#444',fontSize:'32rpx',fontWeight:'bold',transform:'scale(1.05)'}"></u-tabs>
			<text class="iconfont icon-shaixuan color_44" @click="showPopup = true"></text>
		</view>
		<view class="p-left30 p-right30 p-bot30" v-if="pageData.members">
			<view class="cust-item p-top30 p-bot30 d-flex j-sb a-center" v-for="(item,index) in pageData.members"
				:key="index" @click="toUrl('/privatePage/client/detail?guest_id=' + item.v_id)">
				<view class="d-flex flex-1">
					<u-avatar :src="$imgUrls(item.v_headimg)" size="40"></u-avatar>
					<view class="m-left18">
						<view class="size30 color_11 m-bot10">{{ item.v_name }}</view>
						<view class="h6 color_44">{{ item.v_tel.replace(/^(.{3})(?:\d+)(.{4})$/, "$1****$2") }}</view>
					</view>
					<view class="m-left18 flex-1">
						<view class="m-bot10 ellipsis" v-if="item.tags">
							<text class="label white" v-for="(itm,idx) in item.tags" :key="idx"
								:style="{background: itm.color}">{{ itm.name }}</text>
						</view>
						<view class="ellipsis" v-if="item.group_name">
							<text class="label self">{{ item.group_name }}</text>
						</view>
					</view>
				</view>
				<view class="text-right" v-if="type == 1">
					<view class="h7 color_66 m-bot10">活跃值</view>
					<view class="size30 color_FF7 bold800">{{ item.browse_count || 0 }}</view>
				</view>
				<view class="text-right" v-if="type == 2">
					<view class="h7 color_66 m-bot10">订单量</view>
					<view class="size30 color_FF7 bold800">{{ item.order_count || 0 }}</view>
				</view>
				<view class="text-right" v-if="type == 3">
					<view class="h7 color_66 m-bot10">订单金额</view>
					<view class="size30 color_FF7 bold800">{{ item.total_amount || 0 }}</view>
				</view>
				<view class="text-right" v-if="type == 4">
					<view class="h7 color_66 m-bot10">注册时间</view>
					<view class="h6 color_44">{{ item.v_addtime }}</view>
				</view>
				<view class="text-right" v-if="type == 5">
					<view class="h7 color_66 m-bot10">生日</view>
					<view class="h6 color_44">{{ item.v_barithday || '未设置' }}</view>
				</view>
			</view>
		</view>
		<emptys v-else title='您还没有相关的客户'></emptys>
		<!-- 筛选弹窗 -->
		<u-popup :show="showPopup" mode="right" closeable @close="showPopup = false"
			:customStyle="{top: totalHeight+'px'}" :overlayStyle="{top: totalHeight+'px'}">
			<view class="filterList padding30 d-flex f-column j-sb" :style="{'--total-height': totalHeight+'px' }">
				<view class="cont">
					<view class="m-bot40">
						<text class="iconfont icon-shaixuan color_44"></text>
						<text class="size32 color_11 m-left10">筛选</text>
					</view>
					<view class="m-bot20 p-left30" v-if="tags.length">
						<view class="title">用户标签</view>
						<view class="d-flex f-wrap">
							<view class="option ellipsis" :class="{'active': item.checked}" v-for="(item,index) in tags"
								:key="index" @click="handleCheck(item)">{{ item.name }}</view>
						</view>
					</view>
					<view class="m-bot20 p-left30" v-if="groups.length">
						<view class="title">个性分类</view>
						<view class="d-flex f-wrap">
							<view class="option ellipsis" :class="{'active': item.checked}"
								v-for="(item,index) in groups" :key="index" @click="handleCheck(item)">{{ item.name }}
							</view>
						</view>
					</view>
					<view class="m-bot40 p-left30">
						<view class="title">注册时间</view>
						<view class="p-top12 p-bot12 d-flex h6 bor_307 bor_radius_30">
							<picker mode="date" :value="startTime" @change="getDate($event, 'start')" class="flex-1">
								<view class="color_77 text-right">{{startTime ? startTime : '开始时间'}}</view>
							</picker>
							<text class="color_22 m-left20 m-right20">至</text>
							<picker mode="date" :value="endTime" @change="getDate($event, 'end')" class="flex-1">
								<view class="color_77 text-left">{{endTime ? endTime : '结束时间'}}</view>
							</picker>
						</view>
					</view>
					<view class="m-bot40 p-left30">
						<view class="title">活跃值</view>
						<view class="d-flex j-sb a-center">
							<u-input :value="value1.start_time" type="number" shape="circle" fontSize="12" color="#777"
								inputAlign="center" :customStyle="inputStyle"
								@change="handleChange($event, 1, 'start_time')" @blur="handleBlur(1)"></u-input>
							<text class="color_22 m-left50 m-right50">至</text>
							<u-input :value="value1.end_time" type="number" shape="circle" fontSize="12" color="#777"
								inputAlign="center" :customStyle="inputStyle"
								@change="handleChange($event, 1, 'end_time')" @blur="handleBlur(1)"></u-input>
						</view>
						<view v-if="pageData.activeVal">
							<text class="h6 color_44 m-right20 m-top20">历史活跃值:</text>
							<text class="old m-right20 m-top20"
								:class="{'active': value1.start_time == item.start_time && value1.end_time == item.end_time}"
								v-for="(item,index) in pageData.activeVal" :key="index"
								@click="handleSelect(item, 1)">{{ item.text }}</text>
						</view>
					</view>
					<view class="m-bot40 p-left30">
						<view class="title">订单量</view>
						<view class="d-flex j-sb a-center">
							<u-input :value="value2.start_time" type="number" shape="circle" fontSize="12" color="#777"
								inputAlign="center" :customStyle="inputStyle"
								@change="handleChange($event, 2, 'start_time')" @blur="handleBlur(2)"></u-input>
							<text class="color_22 m-left50 m-right50">至</text>
							<u-input :value="value2.end_time" type="number" shape="circle" fontSize="12" color="#777"
								inputAlign="center" :customStyle="inputStyle"
								@change="handleChange($event, 2, 'end_time')" @blur="handleBlur(2)"></u-input>
						</view>
						<view v-if="pageData.orderVal">
							<text class="h6 color_44 m-right20 m-top20">历史单量:</text>
							<text class="old m-right20 m-top20"
								:class="{'active': value2.start_time == item.start_time && value2.end_time == item.end_time}"
								v-for="(item,index) in pageData.orderVal" :key="index"
								@click="handleSelect(item, 2)">{{ item.text }}</text>
						</view>
					</view>
					<view class="m-bot40 p-left30">
						<view class="title">订单金额</view>
						<view class="d-flex j-sb a-center">
							<u-input :value="value3.start_time" type="number" shape="circle" fontSize="12" color="#777"
								inputAlign="center" :customStyle="inputStyle"
								@change="handleChange($event, 3, 'start_time')" @blur="handleBlur(3)"></u-input>
							<text class="color_22 m-left50 m-right50">至</text>
							<u-input :value="value3.end_time" type="number" shape="circle" fontSize="12" color="#777"
								inputAlign="center" :customStyle="inputStyle"
								@change="handleChange($event, 3, 'end_time')" @blur="handleBlur(3)"></u-input>
						</view>
						<view v-if="pageData.orderAmount">
							<text class="h6 color_44 m-right20 m-top20">历史金额:</text>
							<text class="old m-right20 m-top20"
								:class="{'active': value3.start_time == item.start_time && value3.end_time == item.end_time}"
								v-for="(item,index) in pageData.orderAmount" :key="index"
								@click="handleSelect(item, 3)">{{ item.text }}</text>
						</view>
					</view>
				</view>
				<view class="d-flex j-sb p-top30">
					<view class="btn" @click="handleReset">重置</view>
					<view class="btn" @click="handleFilter">筛选</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			// 格式化时间戳
			const currentDate = uni.$u.timeFormat(Number(new Date()), 'yyyy-mm-dd')
			return {
				fromShare: 0,
				imgUrl: this.imgUrl,
				tabList: [{
						name: '活跃值',
						type: '1'
					},
					{
						name: '单量',
						type: '2'
					},
					{
						name: '金额',
						type: '3'
					},
					{
						name: '新加入',
						type: '4'
					},
					{
						name: '生日',
						type: '5'
					}
				],
				showPopup: false,
				startTime: '', // 注册时间
				endTime: '',
				inputStyle: {
					'border-color': '#3071FF !important',
					'border-width': '1px !important',
					padding: '2rpx 18rpx'
				},
				type: 1,
				pageData: '',
				tags: [],
				groups: [],
				value1: { // 活跃值
					start_time: '',
					end_time: ''
				},
				value2: { // 订单量
					start_time: '',
					end_time: ''
				},
				value3: { // 订单金额
					start_time: '',
					end_time: ''
				}
			}
		},
		computed: {
			...mapState(['color', 'totalHeight'])
		},
		onShow() {
			this.initData()
		},
		methods: {
			initData() {
				this.$http.get({
					url: '/PrivateSphereApi/myGuestList',
					data: {
						type: this.type
					}
				}).then(res => {
					if (res.code != 200) return this.$Toast(res.msg)
					this.pageData = res.data
					this.tags = this.pageData.tags || []
					this.groups = this.pageData.groups || []
					// 历史记录
					if (!this.pageData.history) return
					let keys = ['activeVal', 'orderVal', 'orderAmount']
					this.pageData.history.forEach(item => {
						this.pageData[keys[item.type - 1]] = item.value
					})
				})
			},
			handleFilter() {
				if (this.startTime && this.endTime && new Date(this.startTime) > new Date(this.endTime)) {
					return this.$Toast('注册结束时间不能小于开始时间！')
				}
				let params = {
					type: this.type
				}
				// 用户标签
				let res1 = this.tags.filter(item => item.checked)
				if (res1.length) params.tags = res1.map(item => item.id).toString()
				// 个性分类
				let res2 = this.groups.filter(item => item.checked)
				if (res2.length) params.group = res2.map(item => item.group_id).toString()
				// 注册时间
				if (this.startTime || this.endTime) params['add_time'] = this.startTime + ' - ' + this.endTime
				// 统一处理活跃值、订单量、订单金额
				let fields = ['active_time_range', 'active_order_range', 'active_money_range']
				fields.forEach((key, i) => {
					if (this[`value${i + 1}`].start_time || this[`value${i + 1}`].end_time) {
						params[key] = this[`value${i + 1}`].start_time + ' - ' + this[`value${i + 1}`].end_time
					}
				})

				console.log('params', params)

				this.$http.get({
					url: '/PrivateSphereApi/myGuestList',
					data: params
				}).then(res => {
					if (res.code != 200) return this.$Toast(res.msg)
					this.pageData = res.data
					this.showPopup = false
					// 历史记录
					if (!this.pageData.history) return
					let keys = ['activeVal', 'orderVal', 'orderAmount']
					this.pageData.history.forEach(item => {
						this.pageData[keys[item.type - 1]] = item.value
					})
				})
			},
			tabClick({
				type
			}) {
				console.log(type)
				this.type = type
				this.initData()
			},
			handleCheck(item) {
				this.$set(item, 'checked', !item.checked)
			},
			handleSelect(item, num) {
				if (this[`value${num}`].start_time == item.start_time && this[`value${num}`].end_time == item.end_time) {
					// 取选
					this[`value${num}`] = {
						start_time: '',
						end_time: ''
					}
					return
				}
				this[`value${num}`] = JSON.parse(JSON.stringify(item))
			},
			handleChange(val, num, key) { // num决定value几，key决定始末
				this[`value${num}`][key] = val
			},
			handleBlur(num) {
				let a = this[`value${num}`]['start_time'] // 下限
				let b = this[`value${num}`]['end_time'] // 上限
				if (a == '' || b == '') return
				if (parseFloat(a) > parseFloat(b)) this[`value${num}`] = {
					start_time: b,
					end_time: a
				}
			},
			handleReset() {
				this.tags.forEach(item => {
					item.checked = false
				})
				this.groups.forEach(item => {
					item.checked = false
				})
				this.startTime = ''
				this.endTime = ''
				this.value1 = {
					start_time: '',
					end_time: ''
				}
				this.value2 = {
					start_time: '',
					end_time: ''
				}
				this.value3 = {
					start_time: '',
					end_time: ''
				}
				this.initData()
				this.showPopup = false
			},
			getDate(e, type) {
				let date = e.detail.value
				if (type == 'start') {
					this.startTime = date
				} else if (type == 'end') {
					this.endTime = date
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.top {
		height: 280rpx;
		background-repeat: no-repeat;
		background-size: 100% auto;

		.climate {
			height: 90rpx;
			background: #4FA9FF;
			padding: 12rpx 6rpx;
			border-radius: 0rpx 0rpx 8rpx 8rpx;
		}
	}

	.cust-item {
		border-bottom: 1rpx solid #d9d9d9;

		.label {
			display: inline-block;
			padding: 0 10rpx;
			height: 34rpx;
			line-height: 34rpx;
			border-radius: 6rpx;
			font-size: 20rpx;
			margin-right: 10rpx;

			&.self {
				background: #FF6631;
				color: #fff;
			}
		}
	}

	.filterList {
		width: 620rpx;
		height: calc(100vh - var(--total-height));

		.cont {
			overflow-x: hidden;
			overflow-y: auto;
		}

		.title {
			font-size: 28rpx;
			color: #444;
			font-weight: bold;
			margin-bottom: 20rpx;
		}

		.option {
			width: 160rpx;
			line-height: 50rpx;
			border-radius: 50rpx;
			text-align: center;
			background: #fff;
			border: 1px solid #3071FF;
			font-size: 24rpx;
			color: #3071FF;
			padding: 0 10rpx;
			margin: 0 24rpx 20rpx 0;

			&:nth-child(3n) {
				margin-right: 0;
			}

			&.active {
				background: #3071FF;
				color: #fff;
			}
		}

		.old {
			display: inline-block;
			border-radius: 20rpx;
			background: #fff;
			border: 1px solid #3071FF;
			font-size: 20rpx;
			color: #3071FF;
			padding: 4rpx 12rpx;

			&.active {
				background: #3071FF;
				color: #fff;
			}
		}

		.btn {
			width: 260rpx;
			line-height: 64rpx;
			border-radius: 32rpx;
			text-align: center;
			font-size: 30rpx;

			&:first-child {
				background: #F3F3F3;
				border: 1px solid #C7C7C7;
				color: #848383;
			}

			&:last-child {
				background: #3071FF;
				color: #fff;
			}
		}
	}

	.bor_307 {
		border: 1px solid #3071FF;
	}
</style>